<template>
	<view class="forgot-password-container">
		<image class="background-image" src="/static/images/backg.png" mode="aspectFill"></image>
		
		<view class="content-overlay">
			<view class="header">
				<text class="title">忘记密码</text>
				<text class="subtitle">{{ currentStep === 1 ? '请输入用户名' : '请选择找回方式' }}</text>
			</view>
			
			<view class="form-section">
				<!-- 步骤1：输入用户名 -->
				<view v-if="currentStep === 1" class="step-one">
					<view class="input-group">
						<text class="label">用户名 <text class="required">*</text></text>
						<input 
							class="input" 
							type="text" 
							placeholder="请输入用户名" 
							v-model="formData.username"
							maxlength="20"
							@blur="onUsernameBlur"
						/>
					</view>
					
					<view class="next-section">
						<button class="next-btn" @click="handleNext" :loading="loading" :disabled="!formData.username.trim()">
							{{ loading ? '验证中...' : '下一步' }}
						</button>
					</view>
				</view>
				
				<!-- 步骤2：选择找回方式 -->
				<view v-if="currentStep === 2" class="step-two">
					<view class="user-info">
						<text class="user-info-text">用户名：{{ formData.username }}</text>
					</view>
					
					<view class="reset-type-section">
						<text class="section-title">找回方式 <text class="required">*</text></text>
						<view class="radio-group">
							<view 
								v-if="userInfo && userInfo.hasSecurityQuestions"
								class="radio-item" 
								:class="{ active: resetType === 'security' }"
								@click="selectResetType('security')"
							>
								<view class="radio-icon"></view>
								<text class="radio-text">密保问题找回</text>
							</view>
							<view 
								v-if="userInfo && userInfo.email"
								class="radio-item" 
								:class="{ active: resetType === 'email' }"
								@click="selectResetType('email')"
							>
								<view class="radio-icon"></view>
								<text class="radio-text">QQ邮箱找回 ({{ userInfo.email }})</text>
							</view>
						</view>
						
						<!-- 如果没有可用的找回方式 -->
						<view v-if="userInfo && !userInfo.hasSecurityQuestions && !userInfo.email" class="no-method">
							<text class="no-method-text">该用户未设置密保问题或邮箱，无法找回密码</text>
						</view>
					</view>
				
				<!-- 密保问题找回 -->
				<view v-if="resetType === 'security'" class="security-section">
					<view class="input-group">
						<text class="label">最喜欢的食物</text>
						<input 
							class="input" 
							type="text" 
							placeholder="请输入答案" 
							v-model="formData.favoriteFood"
							maxlength="50"
						/>
					</view>
					
					<view class="input-group">
						<text class="label">最想去的地方</text>
						<input 
							class="input" 
							type="text" 
							placeholder="请输入答案" 
							v-model="formData.favoritePlace"
							maxlength="50"
						/>
					</view>
					
					<view class="input-group">
						<text class="label">最喜欢的学校</text>
						<input 
							class="input" 
							type="text" 
							placeholder="请输入答案" 
							v-model="formData.favoriteSchool"
							maxlength="50"
						/>
					</view>
				</view>
				
				</view>
				
				<!-- 步骤3：验证身份 -->
				<view v-if="currentStep === 3" class="step-three">
					<view class="user-info">
						<text class="user-info-text">用户名：{{ formData.username }}</text>
						<text class="user-info-text">找回方式：{{ resetType === 'security' ? '密保问题找回' : 'QQ邮箱找回' }}</text>
					</view>
					
					<!-- 密保问题找回 -->
					<view v-if="resetType === 'security'" class="security-section">
						<view class="input-group">
							<text class="label">最喜欢的食物</text>
							<input 
								class="input" 
								type="text" 
								placeholder="请输入答案" 
								v-model="formData.favoriteFood"
								maxlength="50"
							/>
						</view>
						
						<view class="input-group">
							<text class="label">最想去的地方</text>
							<input 
								class="input" 
								type="text" 
								placeholder="请输入答案" 
								v-model="formData.favoritePlace"
								maxlength="50"
							/>
						</view>
						
						<view class="input-group">
							<text class="label">最喜欢的学校</text>
							<input 
								class="input" 
								type="text" 
								placeholder="请输入答案" 
								v-model="formData.favoriteSchool"
								maxlength="50"
							/>
						</view>
					</view>
					
					<!-- 邮箱找回 -->
					<view v-if="resetType === 'email'" class="email-section">
						<view class="input-group">
							<text class="label">QQ邮箱</text>
							<input 
								class="input" 
								type="text" 
								placeholder="请输入QQ邮箱" 
								v-model="formData.email"
								:disabled="true"
							/>
							<text class="email-tip">已自动填入注册时的邮箱</text>
						</view>
						
						<view class="input-group">
							<text class="label">验证码</text>
							<view class="code-input-group">
								<input 
									class="code-input" 
									type="text" 
									placeholder="请输入验证码" 
									v-model="formData.emailCode"
									maxlength="6"
								/>
								<button 
									class="send-code-btn" 
									@click="sendEmailCode"
									:disabled="countdown > 0"
								>
									{{ countdown > 0 ? `${countdown}s` : '发送验证码' }}
								</button>
							</view>
						</view>
					</view>
					
					<!-- 验证按钮 -->
					<view class="verify-section">
						<button class="verify-btn" @click="handleVerify" :loading="verifying">
							{{ verifying ? '验证中...' : '验证身份' }}
						</button>
					</view>
				</view>
				
				<!-- 返回按钮 -->
				<view class="back-link">
					<text class="link" @click="goBack">{{ currentStep === 1 ? '返回登录' : '上一步' }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentStep: 1, // 当前步骤：1-输入用户名，2-选择找回方式，3-验证身份
			formData: {
				username: '',
				resetType: 'security',
				favoriteFood: '',
				favoritePlace: '',
				favoriteSchool: '',
				email: '',
				emailCode: ''
			},
			resetType: 'security',
			verifying: false,
			loading: false,
			countdown: 0,
			userInfo: null
		}
	},
	methods: {
		// 用户名失焦时获取用户信息
		async onUsernameBlur() {
			if (!this.formData.username.trim()) {
				return;
			}
			
			try {
				const response = await uni.request({
					url: `http://localhost:8080/user/getUserInfoForReset?username=${this.formData.username}`,
					method: 'GET'
				});
				
				if (response.data.code === 200) {
					this.userInfo = response.data.data;
				} else {
					this.userInfo = null;
				}
			} catch (error) {
				console.error('获取用户信息失败:', error);
				this.userInfo = null;
			}
		},
		
		// 下一步按钮
		async handleNext() {
			if (!this.formData.username.trim()) {
				uni.showToast({
					title: '请输入用户名',
					icon: 'none'
				});
				return;
			}
			
			this.loading = true;
			
			try {
				const response = await uni.request({
					url: `http://localhost:8080/user/getUserInfoForReset?username=${this.formData.username}`,
					method: 'GET'
				});
				
				if (response.data.code === 200) {
					this.userInfo = response.data.data;
					
					// 检查是否有可用的找回方式
					if (!this.userInfo.hasSecurityQuestions && !this.userInfo.email) {
						uni.showToast({
							title: '该用户未设置密保问题或邮箱，无法找回密码',
							icon: 'none'
						});
						return;
					}
					
					// 自动选择第一个可用的找回方式
					if (this.userInfo.hasSecurityQuestions) {
						this.resetType = 'security';
					} else if (this.userInfo.email) {
						this.resetType = 'email';
						this.formData.email = this.userInfo.email;
					}
					
					this.currentStep = 2;
				} else {
					uni.showToast({
						title: response.data.message || '用户不存在',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('验证用户名失败:', error);
				uni.showToast({
					title: '网络错误，请稍后重试',
					icon: 'none'
				});
			} finally {
				this.loading = false;
			}
		},
		
		// 选择找回方式
		selectResetType(type) {
			this.resetType = type;
			
			if (type === 'email' && this.userInfo && this.userInfo.email) {
				this.formData.email = this.userInfo.email;
			}
			
			// 进入验证步骤
			this.currentStep = 3;
		},
		
		async sendEmailCode() {
			try {
				const response = await uni.request({
					url: 'http://localhost:8080/user/sendEmailCode',
					method: 'POST',
					data: {
						username: this.formData.username,
						email: this.formData.email
					},
					header: {
						'Content-Type': 'application/json'
					}
				});
				
				if (response.data.code === 200) {
					uni.showToast({
						title: '验证码已发送',
						icon: 'success'
					});
					
					// 开始倒计时
					this.countdown = 60;
					this.startCountdown();
				} else {
					uni.showToast({
						title: response.data.message || '发送失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('发送验证码失败:', error);
				uni.showToast({
					title: '网络错误，请稍后重试',
					icon: 'none'
				});
			}
		},
		
		startCountdown() {
			const timer = setInterval(() => {
				this.countdown--;
				if (this.countdown <= 0) {
					clearInterval(timer);
				}
			}, 1000);
		},
		

		
		// 验证身份
		async handleVerify() {
			if (!this.validateVerifyForm()) {
				return;
			}
			
			this.verifying = true;
			
			try {
				if (this.resetType === 'security') {
					// 验证密保问题
					const response = await uni.request({
						url: 'http://localhost:8080/user/verifySecurityQuestions',
						method: 'POST',
						data: {
							username: this.formData.username,
							favoriteFood: this.formData.favoriteFood,
							favoritePlace: this.formData.favoritePlace,
							favoriteSchool: this.formData.favoriteSchool
						},
						header: {
							'Content-Type': 'application/json'
						}
					});
					
					if (response.data.code === 200) {
						// 保存验证数据到本地存储
						const verificationData = {
							favoriteFood: this.formData.favoriteFood,
							favoritePlace: this.formData.favoritePlace,
							favoriteSchool: this.formData.favoriteSchool
						};
						uni.setStorageSync('resetPasswordVerification', verificationData);
						
						uni.showToast({
							title: '身份验证成功',
							icon: 'success'
						});
						
						// 跳转到密码重置页面
						setTimeout(() => {
							uni.navigateTo({
								url: `/pages/reset-password/reset-password?username=${this.formData.username}&resetType=${this.resetType}`
							});
						}, 1000);
					} else {
						uni.showToast({
							title: response.data.message || '密保问题答案错误',
							icon: 'none'
						});
					}
				} else if (this.resetType === 'email') {
					// 验证邮箱验证码
					const response = await uni.request({
						url: 'http://localhost:8080/user/verifyEmailCode',
						method: 'POST',
						data: {
							username: this.formData.username,
							email: this.formData.email,
							emailCode: this.formData.emailCode
						},
						header: {
							'Content-Type': 'application/json'
						}
					});
					
					if (response.data.code === 200) {
						// 保存验证数据到本地存储
						const verificationData = {
							email: this.formData.email,
							emailCode: this.formData.emailCode
						};
						uni.setStorageSync('resetPasswordVerification', verificationData);
						
						uni.showToast({
							title: '身份验证成功',
							icon: 'success'
						});
						
						// 跳转到密码重置页面
						setTimeout(() => {
							uni.navigateTo({
								url: `/pages/reset-password/reset-password?username=${this.formData.username}&resetType=${this.resetType}`
							});
						}, 1000);
					} else {
						uni.showToast({
							title: response.data.message || '验证码错误',
							icon: 'none'
						});
					}
				}
			} catch (error) {
				console.error('验证失败:', error);
				uni.showToast({
					title: '网络错误，请稍后重试',
					icon: 'none'
				});
			} finally {
				this.verifying = false;
			}
		},
		
		// 验证表单（验证阶段）
		validateVerifyForm() {
			if (!this.formData.username.trim()) {
				uni.showToast({
					title: '请输入用户名',
					icon: 'none'
				});
				return false;
			}
			
			if (this.resetType === 'security') {
				if (!this.formData.favoriteFood.trim()) {
					uni.showToast({
						title: '请输入密保问题1答案',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.formData.favoritePlace.trim()) {
					uni.showToast({
						title: '请输入密保问题2答案',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.formData.favoriteSchool.trim()) {
					uni.showToast({
						title: '请输入密保问题3答案',
						icon: 'none'
					});
					return false;
				}
			} else if (this.resetType === 'email') {
				if (!this.formData.email.trim()) {
					uni.showToast({
						title: '请输入邮箱',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.formData.emailCode.trim()) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return false;
				}
			}
			
			return true;
		},
		

		
		goBack() {
			if (this.currentStep === 1) {
				uni.navigateBack();
			} else if (this.currentStep === 2) {
				this.currentStep = 1;
			} else if (this.currentStep === 3) {
				this.currentStep = 2;
			}
		}
	},
	
	watch: {
		resetType(newVal) {
			this.formData.resetType = newVal;
		}
	}
}
</script>

<style lang="scss" scoped>
.email-tip {
	font-size: 24rpx;
	color: #007aff;
	margin-top: 10rpx;
	display: block;
}

.email-error {
	font-size: 24rpx;
	color: #ff3b30;
	margin-top: 10rpx;
	display: block;
}

.next-section {
	margin-top: 40rpx;
}

.next-btn {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
	color: #ffffff;
	border: none;
	border-radius: 44rpx;
	font-size: 32rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
}

.next-btn:disabled {
	background: #cccccc;
	color: #999999;
}

.user-info {
	background: #f8f9fa;
	padding: 20rpx;
	border-radius: 10rpx;
	margin-bottom: 30rpx;
}

.user-info-text {
	font-size: 28rpx;
	color: #333333;
	display: block;
	margin-bottom: 10rpx;
}

.no-method {
	background: #fff3cd;
	border: 1rpx solid #ffeaa7;
	border-radius: 10rpx;
	padding: 20rpx;
	margin-top: 20rpx;
}

.no-method-text {
	font-size: 28rpx;
	color: #856404;
	text-align: center;
}

.verify-section {
	margin-top: 40rpx;
}

.verify-btn {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
	color: #ffffff;
	border: none;
	border-radius: 44rpx;
	font-size: 32rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
}

.verify-btn:disabled {
	background: #cccccc;
	color: #999999;
}
.forgot-password-container {
	min-height: 100vh;
	background: #f5f5f5;
	padding: 40rpx;
}

.background-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}

.content-overlay {
	position: relative;
	z-index: 1;
}

.header {
	text-align: center;
	margin-bottom: 60rpx;
	
	.title {
		font-size: 48rpx;
		color: #333333;
		font-weight: bold;
		display: block;
		margin-bottom: 20rpx;
	}
	
	.subtitle {
		font-size: 28rpx;
		color: #666666;
	}
}

.form-section {
	background: #ffffff;
	border-radius: 20rpx;
	padding: 40rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.input-group {
	margin-bottom: 30rpx;
	
	.label {
		display: block;
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 15rpx;
		font-weight: 500;
		
		.required {
			color: #ff4757;
		}
	}
	
	.input {
		width: 100%;
		height: 80rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 10rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		background: #f8f9fa;
		
		&:focus {
			border-color: #4CAF50;
			background: #ffffff;
		}
		
		&:disabled {
			background: #f0f0f0;
			color: #999999;
		}
	}
}

.reset-type-section {
	margin-bottom: 30rpx;
	
	.section-title {
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 20rpx;
		display: block;
		font-weight: 500;
		
		.required {
			color: #ff4757;
		}
	}
	
	.radio-group {
		.radio-item {
			display: flex;
			align-items: center;
			padding: 20rpx;
			border: 2rpx solid #e5e5e5;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			background: #f8f9fa;
			
					&.active {
			border-color: #4CAF50;
			background: #ffffff;
			
			.radio-icon {
				background: #4CAF50;
				
				&::after {
					content: '';
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 12rpx;
					height: 12rpx;
					background: #ffffff;
					border-radius: 50%;
				}
			}
		}
			
			.radio-icon {
				width: 32rpx;
				height: 32rpx;
				border: 2rpx solid #e5e5e5;
				border-radius: 50%;
				margin-right: 20rpx;
				position: relative;
				background: #ffffff;
			}
			
			.radio-text {
				font-size: 28rpx;
				color: #333333;
			}
		}
	}
}

.security-section,
.email-section {
	margin-bottom: 30rpx;
	padding: 30rpx;
	background: #f8f9fa;
	border-radius: 15rpx;
}

.code-input-group {
	display: flex;
	align-items: center;
	
	.code-input {
		flex: 1;
		height: 80rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 10rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		background: #f8f9fa;
		margin-right: 20rpx;
		
		&:focus {
			border-color: #4CAF50;
			background: #ffffff;
		}
	}
	
	.send-code-btn {
		width: 200rpx;
		height: 80rpx;
		background: #4CAF50;
		color: #ffffff;
		border: none;
		border-radius: 10rpx;
		font-size: 24rpx;
		
		&:disabled {
			background: #cccccc;
		}
	}
}

.reset-btn {
	width: 100%;
	height: 80rpx;
	background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
	color: #ffffff;
	border: none;
	border-radius: 10rpx;
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 30rpx;
	
	&:active {
		opacity: 0.8;
	}
}

.back-link {
	text-align: center;
	
	.link {
		color: #4CAF50;
		font-size: 28rpx;
		
		&:active {
			opacity: 0.7;
		}
	}
}
</style> 